<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输角色名称" clearable v-model="name" @clear="searchRole">
            <el-button slot="append" icon="el-icon-search" @click="searchRole"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加角色</el-button>
        </el-col>
      </el-row>

      <el-table :data="roleList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="角色名称" prop="name"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="removeRoleById(scope.row.id)">删除</el-button>
            <el-button type="warning" size="mini" @click="showEditRoleMenuDialog(scope.row)">菜单权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2, 4 , 8, 16]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
      ></el-pagination>
    </el-card>
    <!--添加角色-->
    <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%">
      <el-form
              :model="addRoleForm"
              :rules="addRoleFormRules"
              ref="addRoleFormRef"
              label-width="100px"
              class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="addRoleForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addRole">确 定</el-button>
                <el-button @click="addDialogVisible = false">取 消</el-button>
            </span>
    </el-dialog>
    <!--修改角色-->
    <el-dialog
            title="修改角色"
            :visible.sync="editDialogVisible"
            width="50%"
            @close="editRoleFormClose"
            :close-on-click-modal="false"
            ref="editRoleFormRef"
    >
      <el-form
              :model="editRoleForm"
              :rules="editRoleFormRules"
              ref="editRoleFormRef"
              label-width="100px"
              class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="editRoleForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editRole">确 定</el-button>
                <el-button @click="cancelEditRole">取 消</el-button>
            </span>
    </el-dialog>


    <!--授权对话框-->
    <el-dialog
            title="菜单权限"
            :visible.sync="editRoleMenuDialogVisible"
            width="50%"
            @close="editRoleMenuPermissionFormClose"
    >
      <el-form
              :model="editRoleMenuPermissionForm"
              :rules="editRoleMenuPermissionFormRules"
              ref="editRoleMenuPermissionFormRef"
              label-width="100px"
              class="demo-ruleForm"
      >
        <el-form-item label="角色ID" prop="roleId">
          <el-input v-model="editRoleMenuPermissionForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="editRoleMenuPermissionForm.name" disabled></el-input>
        </el-form-item>
        <!--:checkStrictly="true"-->
        <el-form-item label="菜单权限" prop="roleMenu">
          <el-tree
                  :data="menuList"
                  show-checkbox
                  default-expand-all
                  node-key="id"
                  ref="roleMenuTree"
                  highlight-current
                  :props="defaultProps"
                  :defaultCheckedKeys="rolePerMenu"

          ></el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editRoleMenu">确 定</el-button>
                <el-button @click="cancelRoleMenu">取 消</el-button>
            </span>
    </el-dialog>


  </div>
</template>
<script>
    export default {
        data() {
            return {
                editRoleMenuDialogVisible:false,
                addDialogVisible: false,
                editDialogVisible: false,
                pageNum: 1,
                pageSize: 2,
                name: "",
                roleList: [],
                total: 0,
                addRoleForm: {
                    name: ""
                },
                addRoleFormRules:{
                    name:[
                        {required:true,message:"角色名称不能为空",trigger:"blur"}
                    ]
                },
                editRoleForm: {
                    id: -1,
                    name: ""
                },
                editRoleFormRules:{
                    name:[
                        {required:true,message:"名称不能为空",trigger:"blur"}
                    ]
                },
                editRoleMenuPermissionForm:{
                    id:-1,
                    name:'',
                    checkedPids:''  //选中的权限的id
                },
                editRoleMenuPermissionFormRules:{

                },
                menuList:[],//所有的菜单
                defaultProps:{
                    children: 'children',
                    label: 'name'
                },
                rolePerMenu:[] //角色本类就拥有的权限 用于反显
            };
        },
        methods: {
            //弹出授权对话框
            showEditRoleMenuDialog(row){
                this.editRoleMenuDialogVisible = true ;//显示对话框
                //反显角色数据  id 和 name
                // alert(row.id)
                this.editRoleMenuPermissionForm.id = row.id;
                this.editRoleMenuPermissionForm.name = row.name
                console.log(row.perIds);
                //反显拥有的权限
                // alert(row.perIds)
                this.rolePerMenu = row.perIds;
            },
            //关闭授权对话框
            editRoleMenuPermissionFormClose(){
                this.editRoleMenuDialogVisible = false
            },
            //保存新的权限
            editRoleMenu(){
                //获取选中的权限的id
                let checkedNodes = this.$refs.roleMenuTree.getCheckedNodes(false,true);
                // alert(checkedNodes.length);
                if (checkedNodes.length < 1){
                    this.$message({
                        type:"warning",
                        message:"请至少选中一条权限！",
                        duration:1000
                    })
                    return ;
                }else {
                    let ids = "";
                    for(let n of checkedNodes){
                        ids += n.id + ":";
                    }
                    ids = ids.substring(0,ids.length-1);
                    this.editRoleMenuPermissionForm.checkedPids = ids;

                    let url = this.$HRMSUrl+"/role/rolePermission";
                    this.$axios.put(url,this.editRoleMenuPermissionForm)
                        .then(res=>{
                            if (res.data.code == 200){
                                this.editRoleMenuDialogVisible = false;
                                this.$refs.roleMenuTree.setCheckedKeys([]); //取消反显的权限的id
                                this.getRoleList();
                            }else {
                                this.$message({
                                    type:"error",
                                    message:res.data.msg,
                                    duration:1000
                                })
                            }
                        })
                }
            },
            //取消更新权限
            cancelRoleMenu(){
                this.$refs.roleMenuTree.setCheckedKeys([]);
                this.editRoleMenuDialogVisible = false ;//显示对话框
            },

            // 删除角色信息
            removeRoleById(id) {
                let url = this.$HRMSUrl+"/role/del/"+id;
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete(url)
                        .then(res=>{
                            if (res.data.code == 200){
                                this.getRoleList();
                            }else {
                                this.$message({
                                    type:"error",
                                    message:res.data.msg,
                                    duration:1000
                                })
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //添加角色
            showAddDialog(row) {
                this.addDialogVisible = true;
            },
            //编辑角色
            showEditDialog(row) {
                this.editDialogVisible = true;
                this.editRoleForm.id = row.id;
                this.editRoleForm.name = row.name;
                // this.editRoleForm = row

            },
            editRoleFormClose() {
                this.$refs.editRoleFormRef.resetFields();
            },
            cancelEditRole(){
                this.$refs.editRoleFormRef.resetFields();
                //this.editRoleForm={};
                this.editDialogVisible = false;
            },
            editRole() {
                this.$refs.editRoleFormRef.validate(valid=>{
                    if (valid){
                        let url = this.$HRMSUrl+"/role/modify"
                        this.$axios.put(url,this.editRoleForm)
                            .then(res=>{
                                if (res.data.code == 200){
                                    this.getRoleList();
                                    this.editDialogVisible = false ;
                                }else {
                                    this.$message({
                                        type:"error",
                                        message:res.data.msg,
                                        duration:1000
                                    })
                                }
                            })
                    }else {
                        return false
                    }
                })
            },
            //添加新的角色
            addRole() {
                this.$refs.addRoleFormRef.validate(valid=>{
                    if (valid) {
                        let url = this.$HRMSUrl+"/role/add";
                        this.$axios.post(url,this.addRoleForm)
                            .then(res=>{
                                if (res.data.code == 200){
                                    this.getRoleList()
                                    this.addRoleForm = {};
                                    this.addDialogVisible = false;
                                }else {
                                    this.$message({
                                        type:"error",
                                        message:res.data.msg,
                                        duration:1000
                                    })
                                }
                            })
                    }else {
                        return false ;
                    }
                })

            },
            //初始化角色数据
            getRoleList() {
                let url = this.$HRMSUrl+"/role/roleList";
                this.$axios.get(url,{
                    params:{
                        name:this.name,
                        now:this.pageNum,
                        size:this.pageSize
                    }
                }).then(res=>{
                    if (res.data.code == 200){
                        this.roleList = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.pageSize = res.data.data.pageSize;
                        this.total = res.data.data.total;
                    }else {
                        this.$message({
                            type:"error",
                            message:res.data.msg,
                            duration:1000
                        })
                    }
                })
            },
            searchRole() {
                this.getRoleList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getRoleList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getRoleList();
            },

            loadMenus() {
                let url = this.$HRMSUrl+"/permission/listAllMenu"
                this.$axios.get(url)
                    .then(res=>{
                        if (res.data.code == 200){
                            this.menuList = res.data.data;
                        }else {
                            this.$message({
                                type:"error",
                                message:res.data.msg,
                                duration:1000
                            })
                        }
                    })
            }
        },
        created() {
            this.searchRole();
            this.loadMenus();
        }
    };
</script>
<style lang="less" scoped>
</style>